<template>
  <h1>Element Plus Icons Example Click To Copy Source Code</h1>
  <div class="icon-list">
    <div v-for="(component, name) in icons" :key="name" @click="handleClipboard(generateElementIconCode(component), $event)">
<!--      <el-tooltip placement="top" :content="generateElementIconCode(component)">-->
        <div class="icon-item">
          <el-icon><component :is="component" /></el-icon>
          <span>{{ name }}</span>
        </div>
<!--      </el-tooltip>-->
    </div>
  </div>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import clipboard from '../../utils/clipboard'
const icons = ElementPlusIconsVue;


const generateElementIconCode =(symbol) =>  {
  return `<el-icon><${symbol.name} /></el-icon>`
}

const handleClipboard =(text, event) => {
  clipboard(text, event)
}

</script>

<style scoped>
.icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.icon-item {
  margin: 10px;
  height: 60px;
  text-align: center;
  width: 60px;
  float: left;
  font-size: 30px;
  color: #24292e;
  cursor: pointer;
  border: 1px solid #ccc;
}

span {
  display: block;
  font-size: 13px;
  margin-top: 10px;
}
</style>